<!DOCTYPE html>
<html lang="en">
    <!-- head表示网页的头部 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页的标题 -->
    <title>HTML的基础标签</title>
</head>
<body>
    <!-- 标题标签：它是一个块级元素，独占一行，自动换行 -->
    <h1>标题标签1</h1>
    <h2>标题标签2</h2>
    <h3>标题标签3</h3>
    <h4>标题标签4</h4>
    <h5>标题标签5</h5>
    <h6>标题标签6</h6>
    <!-- 段落标签：它是一个块级元素，独占一行，自动换行 公式：p*n 回车-->
    <p>这是一个段落标签</p>
    <p>这是一个段落标签</p>
    <p>这是一个段落标签</p>
    <!-- 超链接：<a> 标签定义超链接，用于从一张页面链接到另一张页面。 -->
    <!-- <a> 元素最重要的属性是 href 属性，它指示链接的目标。 -->
    <!-- target表示在何处打开文档(可以理解为是在当前窗口中打开还是另开一个网页) -->
    <!-- 注意：a标签是内联元素/行内元素：在同一行显示，如果一行显示不下自动换行 -->
    <a href="index.html" target="_blank" >超链接1</a>
    <a href="http://www.baidu.com">超链接2</a>
    <a href="http://www.163.com">超链接3</a>    

    <!-- HTML 图像 HTML 图像是通过 <img> 标签进行定义的。 -->
    <!-- scr就是我们连接的图片的url地址 -->
     <!-- 路径的问题  ../返回上一级   ../../ -->
    <img src="img/dengziqi.jpg">
    <img src="img/Eminem.jpg">
    <img src="img/linjunjie.jpg">
    <img src="img/Morricone.jpg">

    <!-- 图片链接 -->
    <a href="index.html">
        <img src="img/Morricone.jpg">
    </a>

    <!-- table表格  行 tr   列 td    快捷方式 ：table>tr*n>td*n  回车-->
    <table border="100">
        <tr>
            <td>id</td>
            <td>name</td>
            <td>phone</td>
        </tr>
        <tr>
            <td>1000</td>
            <td>fender</td>
            <td>12</td>
        </tr>
        <tr>
            <td>1001</td>
            <td>gibson</td>
            <td>22</td>
        </tr>
    </table>

    <!-- 无序列表 ul -->
    <ul>
        <li><a href="">Java</a></li>
        <li>NodeJS</li>
        <li>HTML</li>
        <li>JavaScript</li>
    </ul>

    <!-- 有序列表 -->
    <ol>
        <li>Java</li>
        <li>NodeJS</li>
        <li>HTML</li>
        <li>JavaScript</li>
    </ol>

    <!-- 自定义列表 -->
    <dl>
        <dt>Java</dt>
        <dd>针对Java描述的详细信息</dd>
        <dt>Node</dt>
        <dd>针对Node描述的详细信息</dd>
    </dl>

    <!-- div 块级元素：一定要配合CSS才有效果 -->
    <div>这是一个块级元素</div>
    <div>这是一个块级元素</div>
    <div>这是一个块级元素</div>

    <!-- 内联元素：一定要配合CSS才有效果 -->
    <span>这是一个内联元素</span>
    <span>这是一个内联元素</span>
    <span>这是一个内联元素</span>
</body>
</html>